<template>
  <div class="top">
    <Banner 
      ref="ACtivityBannerRef" 
      :shopid="ShopID" 
    />
    <List 
      ref="ACtivityListRef" 
      :shopid="ShopID" 
    />
    <img
      v-if="gotop"
      src="../assets/img/totop.png"
      alt=""
      class="tops"
      @click="toTop"
    >
  </div>
</template>

<script>
import Banner from "../components/shopindex/ActivityBanner.vue"; // 活动banner  
import List from "../components/shopindex/ActivityList.vue"; // 活动列表
export default {
  name: "",
  components: {
    Banner,
    List,
  },
  data() {
    return {
      gotop: false,
      ShopID: ''
    };
  },
  mounted() {
    this.ShopID = this.$route.query.id
    this.$refs.ACtivityBannerRef.getData(this.$route.query.id) // 获取活动列表的banner
    this.$refs.ACtivityListRef.getData(this.$route.query.id) // 获取活动列表
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.tops {
  z-index: 999;
  position: fixed;
  top: 45%;
  right: 8%;
  width: 4.94rem;
  height: 4.94rem;
}
</style>
